<template>
  <div class="modal-component">
    <div
      class="modal fade"
      :id="modelConfig.modalId ? modelConfig.modalId : 'add_edit_Modal'"
      role="dialog"
      aria-labelledby="myModalLabel"
    >
      <div class="modal-dialog" :style="modelConfig.modalStyle" role="document">
        <div class="modal-content c-dark">
          <div class="modal-header c-dark">
            <h4 class="modal-title" v-if="modelConfig.modalTitle">
              {{ $t(modelConfig.modalTitle) }}
              <template v-if="!modelConfig.isAdd"
                >:【<span style="color: red">{{ interceptParams() }}</span
                >】
              </template>
            </h4>
            <h4 class="modal-title" v-if="!modelConfig.modalTitle">
              {{ $t(modelConfig.modalTitle) + ':' }}
              <label v-if="modelConfig.isAdd">
                <span>{{ $t('button.add') }}</span>
              </label>
              <label v-else>
                <span>{{ $t('button.edit') }}</span>
                <span style="color: red;"> {{ interceptParams() }} </span>】
              </label>
            </h4>
            <Icon type="close-round" data-dismiss="modal"></Icon>
          </div>
          <div class="modal-body">
            <form class="">
              <div v-for="(item, index) in modelConfig.config" class="params-each" :key="index">
                <label
                  class="col-md-2 label-name"
                  v-if="item.type != 'slot' && isHide(item.hide)"
                  :class="item.type === 'select' ? 'lable-name-select' : ''"
                >
                  {{ $t(item.label) }}:</label
                >
                <input
                  v-if="item.type === 'text' && isHide(item.hide)"
                  v-model="modelConfig.addRow[item.value]"
                  autocomplete="off"
                  :disabled="modelConfig.isAdd ? false : item.disabled"
                  :placeholder="$t(item.placeholder)"
                  type="text"
                  :name="item.value"
                  class="col-md-7 form-control model-input"
                />
                <input
                  v-if="item.type === 'number' && isHide(item.hide)"
                  v-model.number="modelConfig.addRow[item.value]"
                  autocomplete="off"
                  :disabled="modelConfig.isAdd ? false : item.disabled"
                  :placeholder="$t(item.placeholder)"
                  type="text"
                  :name="item.value"
                  class="col-md-7 form-control model-input"
                />
                <input
                  v-if="item.type === 'password' && isHide(item.hide)"
                  v-model="modelConfig.addRow[item.value]"
                  autocomplete="new-password"
                  :disabled="modelConfig.isAdd ? false : item.disabled"
                  type="password"
                  :placeholder="$t(item.placeholder)"
                  :name="item.value"
                  class="col-md-7 form-control model-input"
                />
                <input
                  v-if="item.type === 'checkbox' && isHide(item.hide)"
                  v-model="modelConfig.addRow[item.value]"
                  autocomplete="off"
                  :type="item.type"
                  :disabled="modelConfig.isAdd ? false : item.disabled"
                  class="checkbox"
                />
                <i-switch v-if="item.type === 'switch' && isHide(item.hide)" v-model="modelConfig.addRow[item.value]" />
                <textarea
                  v-if="item.type === 'textarea' && isHide(item.hide)"
                  v-model="modelConfig.addRow[item.value]"
                  :placeholder="$t(item.placeholder)"
                  :class="item.isError ? 'red-border textareaSty' : 'textareaSty'"
                  :disabled="item.disabled"
                />
                <InputNumber
                  v-if="item.type === 'inputNumber' && isHide(item.hide)"
                  :disabled="modelConfig.isAdd ? false : item.disabled"
                  class="col-md-7 v-selectss"
                  :max="modelConfig.addRow[item.max] || 10"
                  :min="modelConfig.addRow[item.min] || 0"
                  v-model="modelConfig.addRow[item.value]"
                >
                </InputNumber>
                <Select
                  v-if="item.type === 'select' && isHide(item.hide)"
                  :disabled="modelConfig.isAdd ? false : item.disabled"
                  class="col-md-7 v-selectss"
                  v-model="modelConfig.addRow[item.value]"
                >
                  <Option
                    v-for="item in modelConfig.v_select_configs[item.option]"
                    :value="item.value"
                    :key="item.value"
                    >{{ item.label }}</Option
                  >
                </Select>
                <Select
                  v-if="item.type === 'multiSelect' && isHide(item.hide)"
                  :disabled="modelConfig.isAdd ? false : item.disabled"
                  multiple
                  class="col-md-7 v-selectss"
                  v-model="modelConfig.addRow[item.value]"
                >
                  <Option
                    v-for="item in modelConfig.v_select_configs[item.option]"
                    :value="item.value"
                    :key="item.value"
                    >{{ item.label }}</Option
                  >
                </Select>

                <slot v-if="item.type === 'slot' && isHide(item.hide) && !item.ishide" :name="item.name"></slot>
                <label class="required-tip  isRequired_s" v-if="isRequired_s(item.v_validate) && isHide(item.hide)"
                  >*</label
                >

                <label class="required-tip" v-if="isRequired(item.v_validate) && isHide(item.hide)">*</label>

                <Poptip
                  v-if="item.tips && isHide(item.hide) && item.type !== 'switch'"
                  word-wrap
                  content=""
                  trigger="hover"
                  placement="bottom"
                  :delay="500"
                >
                  <i class="fa fa-question-circle-o question-circle" aria-hidden="true"></i>
                  <div slot="content" class="slot-content-question-circle">
                    <div v-html="item.tips"></div>
                  </div>
                </Poptip>
                <Poptip
                  v-if="item.tips && isHide(item.hide) && item.type === 'switch'"
                  word-wrap
                  content=""
                  trigger="hover"
                  placement="right"
                  :delay="500"
                  style="transform: translateY(2px);"
                >
                  <i class="fa fa-question-circle-o question-circle" aria-hidden="true"></i>
                  <div slot="content" class="slot-content-question-circle">
                    <div v-html="item.tips"></div>
                  </div>
                </Poptip>
              </div>
            </form>
          </div>
          <template v-if="!modelConfig.noBtn">
            <div class="model-footer-f c-dark" v-if="!modelConfig.modalFooter">
              <button type="button" class="btn-cancel-f" data-dismiss="modal">{{ $t('button.cancel') }}</button>
              <button v-if="!modelConfig.saveFunc" @click="save(modelConfig.isAdd)" type="button" class="btn-confirm-f">
                {{ $t('button.save') }}
              </button>
              <button
                v-if="modelConfig.saveFunc"
                @click="customFunc(modelConfig.saveFunc)"
                type="button"
                class="btn-confirm-f"
              >
                {{ $t('button.save') }}
              </button>
            </div>
            <div class="model-footer-f c-dark" v-if="modelConfig.modalFooter">
              <button type="button" class="btn-cancel-f" data-dismiss="modal">{{ $t('button.cancel') }}</button>
              <template v-for="(item, index) in modelConfig.modalFooter">
                <button
                  @click="customFunc(item.Func)"
                  type="button"
                  class="btn-confirm-f"
                  v-if="item.name"
                  :key="index"
                >
                  {{ item.name }}
                </button>
              </template>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { interceptParams } from '@/assets/js/utils'
export default {
  name: 'modal-component',
  data () {
    return {
      configCopy: this.modelConfig,
      FLAG: false
    }
  },
  props: ['modelConfig'],
  mounted () {
    let _this = this
    let modalId = !this.$root.$validate.isEmpty(this.modelConfig.modalId) ? 'add_edit_Modal' : this.modelConfig.modalId
    this.$root.JQ('#' + modalId).on('hidden.bs.modal', () => {
      // 清理表单验证错误信息
      // 清除表单缓存内容  下面把清空switch的数据补全
      this.$root.$validate.emptyJson(_this.modelConfig.addRow)
      // 清除表单缓存的selected数据
      for (let p in _this.modelConfig.v_select_configs) {
        if (p.endsWith('selected')) {
          _this.modelConfig.v_select_configs[p] = null
        }
      }
      // 清除表单selected
      for (let i = 0; i < this.modelConfig.config.length; i++) {
        // 这里不能清空switch绑定的数据，不然会报错
        if (this.modelConfig.config[i].type === 'switch') {
          this.modelConfig.addRow[this.modelConfig.config[i].value] = false
        }
        if (this.modelConfig.config[i].type === 'textarea' && this.modelConfig.config[i].v_validate) {
          this.modelConfig.config[i].isError = false
        }
        if (this.modelConfig.config[i].type === 'select' && this.modelConfig.config[i].v_validate) {
          this.modelConfig.config[i].isError = false
        }
        if (this.modelConfig.config[i].type === 'slot') {
          let arr = this.modelConfig.config[i].v_validate ? this.modelConfig.config[i].v_validate : []
          for (let j = 0; j < arr.length; j++) {
            let key = arr[j].isError
            let value = arr[j].value
            if (arr[j].type === 'select' && !this.modelConfig.v_select_configs[value]) {
              this.modelConfig.v_select_configs[key] = false
            }
          }
        }
      }
    })
  },
  watch: {},
  filters: {},
  methods: {
    // 处理提示信息过长问题
    interceptParams () {
      // return interceptParams(this.$parent.modelTip.value, 20)
      return interceptParams(this.$parent.modelTip.value, 20)
    },
    formValidate () {
      return this.$validator.validate().then(result => {
        // result 为false插件验证input没有填写完整,true为验证填写完整
        /** 验证 select是否进行了选填 实例可参照 [manage][authorizations]user-authorized.vue **/
        let flag = true
        for (let i = 0; i < this.modelConfig.config.length; i++) {
          if (!this.isHide(this.modelConfig.config[i].hide)) {
            continue
          }
          if (this.modelConfig.config[i].type === 'textarea' && this.modelConfig.config[i].v_validate) {
            let obj = this.modelConfig.config[i]
            if (!this.modelConfig.addRow[obj.value]) {
              obj.isError = true
              flag = false
            } else {
              obj.isError = false
            }
          }
          /* ****** 配置里面的select ***** */
          // 配置规则为：在配置type:selcet时，如需校验则添加v_validate: 'required:true',isError: false==>控制错误提示label显示
          // 如果无需校验，则不添加
          // if(this.modelConfig.config[i].type === 'select' && this.modelConfig.config[i].v_validate) {
          //   let obj = this.modelConfig.config[i]
          //   if(!this.modelConfig.v_select_configs[obj.value]){
          //     this.modelConfig.config[i].isError = true
          //     flag = false
          //   }else{
          //     this.modelConfig.config[i].isError = false
          //   }
          // }
          /* ******  slot里面的select  ****** */
          // 配置规则为：在配置type:slot 时，添加 v_validate:[],数组里面存放需要校验的select的配置信息
          // value:绑定值,isError:错误标签显示绑定值，type:select  ===> 如果以后再校验其他类型，再增加判断逻辑
          // {name:'xxxx',type:'slot',v_validate:[{value: 'v_xxx_selected', isError: 'v_xxx_isError', type: 'select'}]}
          // 同时在this.modelConfig.v_select_configs里面定义v_xxx_isError：false
          // slot里面错误提示label显示用 v-if="modelConfig.v_select_configs.v_xxx_isError" 搭配其他具体规则进行组合
          // if(this.modelConfig.config[i].type === 'slot' && !this.modelConfig.config[i].ishide) {
          //   let arr = this.modelConfig.config[i].v_validate ? this.modelConfig.config[i].v_validate :[]
          //   for(let j =0;j<arr.length;j++){
          //     let key = arr[j].isError
          //     let value = arr[j].value
          //     let isMutile = Array.isArray(this.modelConfig.v_select_configs[value]) && this.modelConfig.v_select_configs[value].length<1
          //     if (arr[j].type === 'select' && (isMutile ||!this.modelConfig.v_select_configs[value])) {
          //       this.modelConfig.v_select_configs[key] = true
          //       flag = false
          //     } else {
          //       this.modelConfig.v_select_configs[key] = false
          //     }
          //   }
          // }
        }
        this.modelConfig.config = JSON.parse(JSON.stringify(this.modelConfig.config))
        return result && flag
      })
    },
    save (val) {
      // let resultPromise = this.formValidate()
      // resultPromise.then(result => {
      //   if (result) {
      //     if (val) {
      //       this.$parent.addPost()
      //     } else {
      //       this.$parent.editPost()
      //     }
      //   }
      // })
      if (val) {
        this.$parent.addPost()
      } else {
        this.$parent.editPost()
      }
    },
    // 自定义模态框保存响应函数
    customFunc (func) {
      // let val = this.formValidate()
      // val.then(result => {
      //   if (result) {
      //     this.$parent[func]()
      //   }
      // })
      this.$parent[func]()
    },
    // 控制是否显示必填'*'
    isRequired_s (item) {
      if (typeof item === 'object') {
        for (let i = 0; i < item.length; i++) {
          if (item[i].v_validate) {
            if (item[i].v_validate.indexOf('required') > -1) {
              return true
            } else {
              return false
            }
          }
        }
      }
    },
    isRequired (item) {
      if (!this.$root.$validate.isEmpty(item)) {
        return false
      } else {
        if (item.indexOf('required') > -1) {
          return true
        } else {
          return false
        }
      }
    },
    // 控制表单字段在某种情况下是否显示 //通过设置ishide属性处理普通功能弹窗配置的显示与隐藏,非新建编辑弹窗
    isHide (val) {
      if (val === undefined) {
        return true
      }
      let res = this.modelConfig.isAdd === true ? 'ADD' : 'EDIT'
      if (res === String(val).toUpperCase() || val === true) {
        // val,适用于配置项显示隐藏不依据新建/编辑状态，依赖其他条件，配置boolean值：false显示，true不显示
        return false
      }
      return true
    }
  },
  components: {}
}
</script>

<style lang="less" scoped>
@import '~@/assets/css/common.less';
.isRequired_s {
  position: relative;
  right: -425px;
  top: -35px;
}
.ui-select {
  width: 70%;
}
// .modal{
//   z-index: 2050;
// }
.modal-dialog {
  top: 15%;
}
.modal-body {
  position: initial;
  padding: 16px 8px;
  .params-each {
    display: block;
    margin-bottom: 6px;
    .v-selectss {
      vertical-align: middle;
      min-width: 70% !important;
      display: inline-block;
      padding: 0px;
      word-break: break-all;
    }
    .checkbox {
      margin-top: 11px;
    }
  }
}
.modal-header {
  height: 55px;
  align-items: center;
  .modal-title {
    font-size: 16px;
    // color: rgba(0,0,0,0.85);
  }
  i {
    font-size: 8px;
    color: #a7b3bd;
  }
}
.label-name {
  text-align: right;
  margin-top: 8px;
  padding-left: 0px;
  padding-right: 2px;
}
/*控制v-select时label样式*/
.lable-name-select {
  // position: inherit;
  // bottom: 14px;
  vertical-align: middle;
}
.model-input {
  min-width: 70%;
  font-size: 12px;
  display: inline-block;
}
/*取消选中样式*/
.form-control:focus {
  box-shadow: none;
}
.red-border {
  border: 1px solid red !important;
}
.is-danger {
  color: red;
  margin-left: 70px;
  margin-bottom: 0px;
}
.question-circle {
  font-size: 14px;
  color: gray;
  cursor: pointer;
}
.slot-content-question-circle {
  width: 200px;
  padding: 6px;
  white-space: normal;
}
button:focus {
  box-shadow: none;
}
.btn {
  width: 65px;
  height: 32px;
  padding: 4px 0px;
}
/*placeholer样式--开始 */
::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #c0c1c0;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #c0c1c0;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #c0c1c0;
}
:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #c0c1c0;
}
/*placeholer样式--结束 */
.tipSty {
  color: red;
  margin-left: 8%;
}
.textareaSty {
  display: inline-block;
  vertical-align: top;
  width: 70%;
  border-radius: 4px;
  border-color: #dddee1;
  height: 100px;
  padding: 3px;
}
.textareaSty:focus {
  outline: none !important;
  border-color: #719ece;
}
textarea:disabled {
  background-color: #fff !important;
}
</style>
